<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>html</title>
	<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/bootstrap/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../../js/selfcss/demo.css">
	<script type="text/javascript" src="../../js/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
</head>
	<body class="easyui-layout" fit="true" id="body" >
        <div data-options="region:'north',title:'查询条件',hideCollapsedContent:false,collapsed:false" style="height:80px;" id="north">
          <div style="width: 65%;float:left;">
           <form id="ff" style="text-align: center;margin-top: 15px;margin-left: 15px;" method="post"> 
		    	<table cellpadding="0" cellspacing="0" class="table-striped">
		    		<tr>
		    		   		    		   
		    		      <td>应用名称：</td>
		    		      <td>
		    			  <input name="applicationName" id="applicationName" type="text" class="easyui-validatebox txt"/>
		    			 </td>
		    		</tr>
		    	</table>
		    </form>
          </div>
          <div style="width: 30%;float:right;margin-top: 15px;">
            <a href="javascript:Handler.searchData()" class="easyui-linkbutton"  style="width:80px">查询</a>
            <a href="javascript:Handler.resetFormData()" class="easyui-linkbutton"  style="width:80px">重置</a>
          </div>
        </div>
        
        <div data-options="region:'center',split:false" >
			<table id="tablelist" class="easyui-datagrid"  style="width:auto;" fitcolumns="true" fit="true" 
			data-options="singleSelect:true,pagination:true,url:'../../searchSystemApplications',method:'get',toolbar:toolbar">
				<thead>
					<tr>					   
					    <th data-options="field:'ck',checkbox:true"></th>
						<th data-options="field:'applicationName',width:100,align:'center'">应用名称</th>
						<th data-options="field:'applicationHost',width:100,align:'center'">应用主机</th>
						<th data-options="field:'applicationPort',width:100,align:'center'">应用端口</th>
						<th data-options="field:'jmxHost',width:100,align:'center'">jmx主机</th>
						<th data-options="field:'jmxPort',width:100,align:'center'">jmx端口号</th>
						<th data-options="field:'jmxStatusString',width:100,align:'center'">jmx连接状态</th>
						<th data-options="field:'jmxUserName',width:100,align:'center'">jmx用户名</th>
						<th data-options="field:'jmxPassWord',width:100,align:'center'">jmx密码</th>
						<th data-options="field:'createTimeString',width:100,align:'center'">创建时间</th>
						<th data-options="field:'createUserName',width:100,align:'center'">创建名称</th>
					</tr>
				</thead>
			</table>
		</div>
		<div id="formwin" class="easyui-window"  data-options="iconCls:'icon-save',closed:true" >
		   <form id="infoForm" method="post" style="text-align: center;margin-top: 20px;margin-left: 50px;">
			    <input type="hidden" id="id" name="id" />
			  	<table class="common-table" style="border-collapse:separate; border-spacing:15px;" cellspacing="15" cellpadding="0">
			  	  <tr>
			  	    <th>应用名称：</th>
			  	     <td>
		    			  <input name="applicationName" id="applicationName" type="text" class="easyui-validatebox txt"/>
			  	     </td>
			  	    <th>应用主机：</th>
			  	     <td>
		    			  <input name="applicationHost" id="applicationHost" type="text" class="easyui-validatebox txt"/>
			  	     </td>
			  	    </tr>
			  	  <tr>
			  	    <th>应用端口：</th>
			  	     <td>
		    			  <input name="applicationPort" id="applicationPort" type="text" class="easyui-validatebox txt"/>
			  	     </td>
			  	    <th>jmx主机：</th>
			  	     <td>
		    			  <input name="jmxHost" id="jmxHost" type="text" class="easyui-validatebox txt"/>
			  	     </td>
			  	    </tr>
			  	  <tr>
			  	    <th>jmx端口号：</th>
			  	     <td>
		    			  <input name="jmxPort" id="jmxPort" type="text" class="easyui-validatebox txt"/>
			  	     </td>
			  	    <th>jmx用户名：</th>
			  	     <td>
		    			  <input name="jmxUserName" id="jmxUserName" type="text" class="easyui-validatebox txt"/>
			  	     </td>
			  	    </tr>
			  	  <tr>
			  	    <th>jmx密码：</th>
			  	     <td>
						    <input type="password" class="easyui-validatebox txt"   name="jmxPassWord"/> 
			  	     </td>
			  	    </tr>
			  	</table>
  			</form>
  			<div id="dlg-buttons2" style="text-align: center;vertical-align: middle;margin-top: 20px;">
				
				<a href="javascript:void(0)" class="easyui-linkbutton c5"
					onclick="javascript:$('#formwin').window('close');"
					style="width: 90px">关闭</a>					
				<a href="javascript:void(0)" class="easyui-linkbutton c6"
					 onclick="javascript:Handler.saveData();" style="width: 90px">保存</a>	
			</div>
    	</div>
    	<div id="formwin1" class="easyui-window"  data-options="iconCls:'icon-save',closed:true" >
		  
			<table id="tablelist1" class="easyui-datagrid"  style="width:auto;" fitcolumns="true" fit="true" 
			data-options="singleSelect:false,method:'get',toolbar:toolbar1,pagination:true">
				<thead>
					<tr>					   
					    <th data-options="field:'ck',checkbox:true"></th>
						<th data-options="field:'componentKey',width:100,align:'center'">组件名称</th>
						<th data-options="field:'keyConfig',width:100,align:'center'">关键配置</th>
						<th data-options="field:'createUserName',width:100,align:'center'">创建人</th>
						<th data-options="field:'createTimeString',width:100,align:'center'">创建时间</th>
					</tr>
				</thead>
			</table>
    	</div>
		<script type="text/javascript">
		var active={};
        var toolbar = [{
            text:'新增',
            iconCls:'icon-add',
            handler:function(){Handler.addData()}
        },'-',{
            text:'删除',
            iconCls:'icon-cut',
            handler:function(){Handler.deleteData()}
        },'-',{
            text:'编辑',
            iconCls:'icon-save',
            handler:function(){Handler.editData()}
        },'-',{
            text:'性能报表',
            iconCls:'icon-large-shapes',
            handler:function(){Handler.performanceData()}
        },'-',{
            text:'查询',
            iconCls:'icon-search',
            handler:function(){Handler.searchDataById()}
        },'-',{
            text:'关联系统组件',
            iconCls:'icon-edit',
            handler:function(){Handler.authData()}
        },'-',{
            text:'测试开通',
            iconCls:'icon-edit',
            handler:function(){Handler.testOpen()}
        }];
        var toolbar1 = [{
            text:'关联系统组件',
            iconCls:'icon-save',
            handler:function(){Handler.linkData()}
        }];
      //设置分页控件  
      $(document).ready(function() {
    	  var p = $('#tablelist').datagrid('getPager');  
          p.pagination({  
              pageSize: 10,//每页显示的记录条数，默认为10  
              pageList: [10, 20, 50],//可以设置每页记录条数的列表  
              beforePageText: '第',//页数文本框前显示的汉字  
              afterPageText: '页    共 {pages} 页',  
              displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'  
          });
          $('#tablelist1').datagrid({onLoadSuccess : function(data){//加载完成，初始化表格单元格
        	  var rowData = data.rows;
              $.each(rowData, function (index, value) {
            	  var rowsChecked = $('#tablelist').treegrid('getSelected');
            	  var url="../../searchSystemComponentByapplicationIdAndcomponentId?applicationId="+rowsChecked.id+"&componentId="+value.id;
        			$.get(url, function(data){
      				if(data.status==200){
      					$("#tablelist1").datagrid("checkRow", index);
      				}
      			 },"json");
            	  
              });
        	}});
      });
      var Handler = {
    			deleteData: function(){ 
      			  var rowsChecked = $('#tablelist').datagrid('getChecked');
      			  $.messager.confirm('信息提示', '确认是否删除数据?', function(r){
      	                if (r){
      	                	$.post("../../removeSystemApplication",{id:rowsChecked[0].id},function(data,state){
      	    					 if(state=="success" && data.status==200){
      	    						 $('#tablelist').datagrid('reload'); 
      	    						 $('#ff').form('clear');
      	    					 }else{
      	    						 $.messager.alert('失败信息',data.message,'error');
      	    					 }	
      	  					},"json");
      	                }
      	            }); 
      			},
      			testOpen: function(){ 
        			  var rowsChecked = $('#tablelist').datagrid('getChecked');
        			  $.messager.confirm('信息提示', '确认是否开通JMX连接?', function(r){
        	                if (r){
        	                	var rowsChecked = $('#tablelist').datagrid('getChecked');
        	          			if(rowsChecked[0].status&&rowsChecked[0].jmxStatus==1){//成功
        	          				 $.messager.alert('警告信息',"JMX已经开通",'info');
        	          			}else{
        	          				$.post("../../testOpenSystemComponent",{id:rowsChecked[0].id},function(data,state){
           	    					 if(state=="success" && data.status==200){
           	    						 $('#tablelist').datagrid('reload'); 
           	    						 $('#ff').form('clear');
           	    					 }else{
           	    						 $.messager.alert('失败信息',data.message,'error');
           	    					 }	
           	  					  },"json");
        	          			}        	                	
        	                }
        	            }); 
        		},
      			linkData: function(){ 
      			  var rowsChecked = $('#tablelist').treegrid('getSelected');
      			  var rows = $('#tablelist1').datagrid('getChecked');
      			  var ids = [];
					  for(var index in rows){
							 var r = rows[index];
				             	ids.push(r.id);
							}
					  var componentIds = ids.join(','); 	
      			  $.messager.confirm('信息提示', '确认是否关联系统组件?', function(r){
      	                if (r){
      	                	$.post("../../linkSystemComponent",{applicationId:rowsChecked.id,componentIds:componentIds},function(data,state){
      	    					 if(state=="success" && data.status==200){
      	    						 $('#formwin1').window('close');
      	    						 $('#tablelist').treegrid('load');
      	    					 }else{
      	    						 $.messager.alert('失败信息',data.message,'error');
      	    					 }	
      	  					},"json");
      	                }
      	            }); 
      			},	      			
      		  resetFormData: function(){
      			$('#ff').form('clear');
      		  },
      		  searchData: function(){
      			  var params=getFormData("ff");
      			  $('#tablelist').datagrid('load',params);
      		  },
      		performanceData: function(){
      			var rowsChecked = $('#tablelist').datagrid('getChecked');
      			if(rowsChecked[0].status&&rowsChecked[0].jmxStatus==2){//失败
     				 $.messager.alert('警告信息',"JMX没有开通，不能查看性能报表",'error');
     			}else{
          			location.href='performance.html?id='+rowsChecked[0].id;
     			}
      		},
      		searchDataById: function(){
      			var rowsChecked = $('#tablelist').datagrid('getChecked');
      			var url="../../"+rowsChecked[0].id+"/searchSystemApplication";
      			$.get(url, function(data){
    				if(data.status==200){
    					$('#infoForm').form('load', data.data);
    					$("#dlg-buttons2").css('display','none');
    				}
    			},"json");
      			openWindow("formwin","查询页面","icon-search");
    		  },
      		 addData: function(){
      			$('#infoForm').form('clear');
      			$("#dlg-buttons2").css('display','block');
      			openWindow("formwin","新增页面","icon-add");
      		  },
      		authData: function(){
      	    	$('#tablelist1').datagrid({url : '../../searchSystemComponents'}); 
      			openWindow("formwin1","关联系统组件页面","icon-edit");
      		  }, 
      		editData: function(){
      			$('#infoForm').form('clear');
      			var rowsChecked = $('#tablelist').datagrid('getChecked');
      			var url="../../"+rowsChecked[0].id+"/searchSystemApplication";
      			$.get(url, function(data){
    				if(data.status==200){
    					$('#infoForm').form('load', data.data);
    					$("#dlg-buttons2").css('display','block');
    				}
    			},"json");
      			openWindow("formwin","编辑页面","icon-edit");
      		  },
       		 saveData: function(){
       			 var params=getFormData("infoForm");
       			 var url="";
       			 if(params.id){//存在
       				url="../../editSystemApplication";
       			 }else{
       				 url="../../systemApplication";
       			 }
       			 $.post(url,params,function(data,state){
					 if(state=="success" && data.status==200){
						 $('#infoForm').form('clear');
						 $('#formwin').window('close');
						 var params=getFormData("ff");
		      			 $('#tablelist').datagrid('load',params);
					 }else{
						 $.messager.alert('失败信息',data.message,'error');
						 $('#infoForm').form('clear');
					 }	
					},"json");
       		  }
      };
      function getFormData(id){
    	    var data = $("#"+id).serializeArray();
    		var item,key,value,newData={};
    		for(var i=0;i<data.length;i++){
    			item = data[i];
    			key = item.name;
    			if(item.value){
    				value = item.value;
        			newData[key] = value;
    			}
    		}	
    		return newData;
    	}
      
      function openWindow(id,title,iconcls){
    	  $('#'+id).window({
			    width:850,
			    height:400,
			    top:($("#body").height() - 400) * 0.5,   
              	left:($("#body").width() - 800) * 0.5,
              	shadow: true,
              	collapsible:false,
              	minimizable:false,
              	maximizable:false,
              	iconCls:iconcls,
			    title:title,
			    modal:true
			});
			 $('#'+id).window('open');
      }
      
    </script>
		
	</body>
	
</html>